<!DOCTYPE html>
<html>
  <head>
    <title>Issue #498: validate method show only one prompt</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="../css/validationEngine.jquery.css" />
    <link rel="stylesheet" type="text/css" href="http://ivaynberg.github.com/select2/select2-master/select2.css" />
     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>

    <script type="text/javascript" src="../js/languages/jquery.validationEngine-en.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script type="text/javascript" src="../js/jquery.validationEngine.js"></script>
    <script type="text/javascript">
$(document).ready(function() {

    $( "#dialog-form" ).dialog({
        autoOpen: true,
        height: 300,
        width: 600,
        modal: true,
        buttons: {
            Submit: function() {
                if($("#testform").validationEngine('validate'))
                {
                    alert('valid');
                    $(this).dialog("close");
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });


    $("#source").select2({
        closeOnSelect: false,
        formatResult: format,
        formatSelection: format,
        blurOnChange: true
    });

    $('#testform').validationEngine({ prettySelect: true, usePrefix: 's2id_', autoPositionUpdate: true });
});


function format(state) {
    // Update: Made it work by changing "state.element" to $(state.element). 
    var originalOption = $(state.element);
    return originalOption.data('foo') + " " + state.text;}</script>
  </head>
  <body>
    <div id="dialog-form" title="My Test Form">
      <form id="testform" style="margin:10px; padding:1em;">
       <label for="source">Select2</label> 
          <select class="validate[required]" style="width:300px" id="source" multiple> 
          <optgroup label="Alaskan/Hawaiian Time Zone"> 
              <option value="AK" data-foo="bar1">Alaska</option> 
              <option value="HI" data-foo="bar2">Hawaii</option> 
          </optgroup> 
      </select>
          <br/>
          <label for="normalselect">Normal select</label>
      <select class="validate[required]" id="normalselect" >
          <option value=""></option>
          <option value="1">One</option>
          <option value="2">Two</option>
      </select>
          <br/><br/>
          <input type="submit" value="Submit" />
      </form>
      </div>
  </body>
</html>
